<template>
  <div class="basic-config">
    <tabs
      :tabPane="tabPaneList"
      v-model="activeName"
      @tab-click="handleClick"
      :oprateArr="handleOprateArr"
      @actionClick='actionClick'
    >
    </tabs>
    <component :is="activeName" :ref='activeName' @handle-oprate="handleOprate"></component>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import tabs from '@/components/configCommon/configTabs.vue'
import callLabel from './callLabel/index.vue'
import phoneBarConfig from './phoneBarConfig/index.vue'
import statisticsRule from './statisticsRule/index.vue'
import outboundMemory from './outboundMemory/index.vue'
import recordingConfiguration from './recordingConfiguration/index.vue'
import { isHasFuncOrMenus } from '@/utils/common'

@Component({
  name: 'ivr',
  components: { tabs, phoneBarConfig, callLabel, statisticsRule, outboundMemory, recordingConfiguration }
})
export default class Ivr extends Vue {
  [x: string]: any
  private activeName = 'phoneBarConfig'
  private handleOprateArr = []
  private tabPaneList = [
    { label: '电话条状态', name: 'phoneBarConfig', _id: 'phoneBar_status' },
    { label: '通话标签', name: 'callLabel', _id: 'call_tag_config' },
    {
      label: '外呼记忆',
      name: 'outboundMemory',
      _id: 'dialout_memory'
    },
    {
      label: '统计规则',
      name: 'statisticsRule',
      _id: 'statistical_rules'
    }
  ]

  private handleClick (item) {
    this.$set(this, 'handleOprateArr', [])
  }

  private actionClick (action) {
    this.$refs[this.activeName][action]()
  }

  private handleOprate (list) {
    this.$set(this, 'handleOprateArr', list)
  }

  private beforeMount () {
    const arr = ['phoneBar_status', 'call_tag_config', 'dialout_memory', 'statistical_rules'] // 电话条状态
    const newArr: any[] = []
    arr.forEach((item: string) => {
      if (isHasFuncOrMenus(item, this.$store.state.common.session.user, true)) {
        newArr.push(item)
      }
    })
    console.error(this.$store.state.common.session.user?.roleType, 23333)
    this.tabPaneList = this.tabPaneList.filter(item => newArr.indexOf(item._id) > -1)
    if (this.$store.state.common.session.user?.roleType === 'billAdmin') {
      this.tabPaneList.push({
        label: '录音配置',
        name: 'recordingConfiguration',
        _id: ''
      })
    }
    this.activeName = this.tabPaneList[0] ? this.tabPaneList[0].name : 'phoneBarConfig'
  }
}
</script>

<style lang="stylus" scoped>
.basic-config
  height 100%
  position relative
</style>
